<!--
 * @Author: chenli 604089679@qq.com
 * @Date: 2023-07-07 14:48:34
 * @LastEditors: chenli 604089679@qq.com
 * @LastEditTime: 2023-08-03 18:06:36
 * @FilePath: \vue3\src\views\map\index.vue
 * @Description: 地图练习
-->
<template>
    <div id="mymap" class="mymap-css">
      <MyInfoWindow
        name="自定义窗体"
        :position="position"
        v-show="showInfo"
      ></MyInfoWindow>
    </div>
    <el-image :src="imgurl"></el-image>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref, watch, watchEffect } from "vue";
  import AMapLoader from "@amap/amap-jsapi-loader";
  import { shallowRef } from "@vue/reactivity";
  import { nextTick } from "vue";
  import MyInfoWindow from "./components/IocInfo.vue";
  let map = shallowRef<AMap.Map>(); //地图实例
  let navg1 = null; //巡航器
  let myinfoWindow = shallowRef<AMap.InfoWindow>();

  let showInfo = ref(false);
  let position = ref<Array<number>>([]); //巡航其位置
  let imgurl = new URL('/src/assets/car1.png', import.meta.url).href
  //初始化地图
  function initMap() {
    window._AMapSecurityConfig = {
      securityJsCode: "3ba6501b9955bb6a531ce67035570ff4",
    };
    AMapLoader.load({
      key: "a502a10c36c57861d480ddb2c24fdeef", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      /**
       * AMap.MoveAnimation 车辆移动插件
       * misc/PathSimplifier 巡航器
       * overlay/SimpleInfoWindow 信息窗体
       */
      plugins: ["AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        plugins: ["misc/PathSimplifier", "overlay/SimpleInfoWindow"],
      },
    })
      .then((AMap) => {
        map.value = new AMap.Map("mymap", {
          //设置地图容器id
          viewMode: "2D", //是否为3D地图模式
          zoom: 6, //初始化地图级别
          center: [112.562427, 37.786068], //初始化地图中心点位置
          mapStyle: "amap://styles/dark",
        });
        map.value.on("complete", function () {
          // 地图图块加载完成后触发
          console.log("地图加载完毕");
          initAction();
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }
  
  //画点
  function drawPoint() {
    // 创建 AMap.Icon 实例：
    const startIcon = new AMap.Icon({
      size: new AMap.Size(40, 50), // 图标尺寸
      image: new URL("/src/assets/start.png", import.meta.url).href, // Icon的图像
      imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
      imageSize: new AMap.Size(20, 25), // 根据所设置的大小拉伸或压缩图片
    });
  
    // // 将 Icon 实例添加到 marker 上:
    const startMarker = new AMap.Marker({
      position: new AMap.LngLat(112.900069, 36.353021),
      offset: new AMap.Pixel(-10, -10),
      icon: "/src/assets/start.png", // 添加 Icon 实例
      title: "起点",
    });
  
    // 创建 AMap.Icon 实例：
    const endIcon = new AMap.Icon({
      size: new AMap.Size(40, 50), // 图标尺寸
      image: "/src/assets/end.png", // Icon的图像
      imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
      imageSize: new AMap.Size(20, 25), // 根据所设置的大小拉伸或压缩图片
    });
    // 将 Icon 实例添加到 marker 上:
    const endMarker = new AMap.Marker({
      position: new AMap.LngLat(113.277339, 36.324371),
      offset: new AMap.Pixel(-10, -10),
      icon: endIcon, // 添加 Icon 实例
      title: "终点",
    });
    map.value.add(startMarker);
    map.value.add(endMarker);
    // map.value.setFitView([startMarker, endMarker]);
  }
  let isLock = false;
  function limit() {
    if (isLock) {
      return;
    }
    isLock = true;
    setTimeout(() => {
      isLock = false;
      map.value.setFitView();
    }, 3000);
  }
  /**
   * 信息窗体
   */
  function infoWindow() {
    //构建信息窗体中显示的内容
    myinfoWindow.value = new AMap.InfoWindow({
      content: document.getElementById("myInfoWindow")!,
      offset: new AMap.Pixel(0, -20),
      isCustom: true,
      autoMove: true,
    });
    myinfoWindow.value.open(map.value, [
      lineData.monitor[0][0],
      lineData.monitor[0][1],
    ]);
    showInfo.value = true;
    // limit();
  }
  function initAction() {
    drawPoint();
  }
  //初始化页面数据
  initMap();
  </script>
  
  <style scoped>
  .mymap-css{
    width: 100%;
    height: 100vh;
  }
  </style>
  